<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tradeStatus="{ record }">
        <div class="pay-trade-tag-box">
          <Tag 
            color="blue" class="pay-trade-plat pay-trade-item" 
            v-if="record.diffType !== '1'"
          >
            渠道: {{ record.channelStatusText }}
          </Tag>
          <Tag 
            color="purple" class="pay-trade-channle pay-trade-item"
            v-if="record.diffType !== '2'"
          >
            平台: {{ record.orderStatusText }}
          </Tag>
        </div>
      </template>
      <template #tradeAmount="{ record }">
        <div class="pay-trade-tag-box">
          <div v-if="record.diffType !== '1'">
            <Tag color="blue" class="pay-trade-plat pay-trade-item">渠道</Tag>
            <span style="margin-left: 5px; color: red">￥{{ record.channelAmount }}</span>
          </div>
          <div v-if="record.diffType !== '2'">
            <Tag color="purple" class="pay-trade-channle pay-trade-item">平台</Tag>
            <span style="margin-left: 5px; color: red">￥{{ record.orderAmount }}</span>
          </div>
        </div>
      </template>
    </BasicTable>
    <FormDetail @register="registerFormDetail"/>
  </div>
</template>
<script lang="ts" name="CheckDiff" setup>
import { ref, onMounted, watch, PropType } from 'vue';
import { Auth } from '/@/enums/authEnum'
import { Row, Col, Tag } from 'ant-design-vue'
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { columns, searchFormSchema } from './data';
import { pageCheckDiff, ignoreCheckDiff } from './api';
import { useMessage } from '/@/hooks/web/useMessage';
import { useRoute } from "vue-router"
import FormDetail from './Detail.vue';

const route = useRoute();
const { t } = useI18n('');
const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()

const props = defineProps({
  params: { type: Object as PropType<any>, required: false },
});


const actionColumn: BasicColumn = {
  width: 130,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '忽略',
      color: 'error',
      ifShow: record.handleStatus === '1' || record.handleStatus === '2',
      auth: Auth.deleteBillCheckDiff,
      popConfirm: {
        title: '是否确认忽略',
        confirm: handleIgnore.bind(null, record),
      },
    },
    {
      label: '详情',
      onClick: handleDetail.bind(null, record),
    },
  ],
  dropDownActions: (record: Recordable) => [
    
  ]
}

const [registerTable, { reload, getForm, setProps }] = useTable({
  title: '差异账单',
  api: pageCheckDiff,
  columns: columns,
  bordered: false,
  beforeFetch: (params) => {
    return params;
  },
  formConfig: {
    baseColProps: { lg: 6, md: 12 },
    labelWidth: 90,
    schemas: searchFormSchema,
    showResetButton: false,
    fieldMapToTime: [['billDate', ['beginDate', 'endDate'], 'YYYY-MM-DD']],
  },
  immediate: false,
  showTableSetting: true,
  showIndexColumn: false,
  useSearchForm: true,
  pagination: true,
  canResize: true,
  rowKey: 'id',
  actionColumn,
})

const loadList = async (batchNo) => {
  const form = getForm()
  if (!form) {
    return
  }
  console.log(batchNo)
  await form.updateSchema({
    field: 'batchNo',
    defaultValue: batchNo
  })
  reload()
}


const handleIgnore = async (record) => {
  await ignoreCheckDiff({ id: record.id })
  reload()
}
const handleDetail = (record) => openFormDetail(true, { record })


watch(
  () => props.params,
  async () => {
    if (!props.params) {
      return
    }
    const { batchNo } = props.params
    if (batchNo) {
      await loadList(batchNo)
      await setProps({ canResize: false })
    }
  },
  {
    immediate: true,
    deep: true
  }
);

onMounted(async () => {
  const { batchNo } = route.query
  if (route.path !== '/pay/checkDiff') {
    return
  }
  loadList(batchNo)
})

</script>

<style lang="less">
.pay-trade-tag-box {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.pay-trade-item {
  // height: 60px
  margin: 2px;
}
.pay-trade-plat {

}

.pay-trade-channle {

}
</style>
